<!--
* @author: Jay
* @description: 顶部导航
* @createTime: 2022-2-26 10:06:08 ?F10: AM?
 -->
<template>
	<view class="">
		<!--顶部导航栏-->
		<view class="uni_tab_bar">
			<view class="uni_swiper_tab order_top">
				<block v-for="(tabBar,index) in tabBars" :key="index">
					<view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}" @tap="toggleTab(tabBar.id)">
						{{tabBar.name}}
						<view class="swiper_tab_line">
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="order_centext">
			　<swiper :current="tabIndex" @change="tabChange" class="order_centext">
				<swiper-item v-for="(content,index) in tabBars" :key="index">
					<view class="swiper_item">{{content.name}}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, //选中标签栏的序列
				tabBars: [{
						name: '全部',
						id: '0'
					},
					{
						name: '待服务',
						id: '1'
					},
					{
						name: '服务中',
						id: '2'
					},
					{
						name: '已完成',
						id: '3'
					},
					{
						name: '已取消',
						id: '4'
					},
				],
			}
		},
		methods: {
			//点击切换
			toggleTab(index) {
				this.tabIndex = index;
			},
			//滑动切换swiper
			tabChange(e) {
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
			}
		}
	}
</script>

<style>
	.order_top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
	}

	.swiper_tab_list {
		color: #888888;
		font-weight: bold;
	}

	.uni_tab_bar .active {
		color: #FEDE33;
		margin-top: 17rpx;
		background-color: #FFFFFF;
	}

	.active .swiper_tab_line {
		border-bottom: 4rpx solid #FEDE33;
		width: 50rpx;
		margin: auto;
		margin-top: 17rpx;
	}

	.uni_swiper_tab {
		border-bottom: 2rpx solid #eeeeee;
		margin-bottom: 15rpx;
	}

	.order_centext {
		height: 800rpx;
		position: fixed;
		top: 180rpx;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-color: #8A6DE9; */
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
</style>
